<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Pills</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/themes/prism.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/toolbar/prism-toolbar.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="typography.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#components-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="components-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="typography.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-info">Components</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-info">Components</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm ps-2" href="../docs/dev-setup.html"><i class="ci-book align-middle mt-n1 me-2"></i>Documentation</a></div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Content</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="typography.html">Typography</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="icon-font.html">Icon font</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="code.html">Code</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="images.html">Images &amp; figures</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tables.html">Tables</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light border-bottom border-light mb-4 pb-4 me-n3">
                  <h3 class="widget-title text-white">Components</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="accordion.html">Accordion</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="alerts.html">Alerts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="badge.html">Badges</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="blog-components.html">Blog components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="breadcrumb.html">Breadcrumb</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="buttons.html">Buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="button-group.html">Button group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="cards.html">Cards</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="carousel.html">Carousel</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="charts.html">Charts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="collapse.html">Collapse</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="contacts-card.html">Contacts card</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="countdown.html">Countdown</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="dropdowns.html">Dropdowns</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="footer.html">Footer</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="forms.html">Forms</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="gallery.html">Gallery</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="input-group.html">Input group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="list-group.html">List group</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="modal.html">Modal</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar.html">Navbar</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="pagination.html">Pagination</a></li>
                    <li class="widget-list-item active"><a class="widget-list-link" href="pills.html">Pills</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="popovers.html">Popovers</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="progress.html">Progress</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="shop-components.html">Shop components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="social-buttons.html">Social buttons</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="spinners.html">Spinners</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="steps.html">Steps</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tabs.html">Tabs</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="team.html">Team</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="testimonials.html">Testimonials / reviews</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="toasts.html">Toasts</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="tooltips.html">Tooltips</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="video-button.html">Video button</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="widgets.html">Widgets</a></li>
                  </ul>
                </div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Utilities</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="https://getbootstrap.com/docs/5.0/utilities/borders/" target="_blank" rel="noopener">Bootstrap</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Cartzilla</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Pills</h1>
            <div class="d-flex flex-wrap flex-md-nowrap justify-content-between">
              <p class="text-muted">It's a button-like navigation component.</p>
              <p class="fs-sm ps-md-4"><a class="text-nowrap" href="https://getbootstrap.com/docs/5.0/components/navs-tabs/#pills" target="_blank" rel="noopener">Bootstrap docs<i class="ci-arrow-right align-middle ms-1"></i></a></p>
            </div>
          </div>
          <!-- Basic example-->
          <section class="pb-5 mb-md-2" id="pills-basic">
            <h2 class="h5 mb-3">Basic example</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result1" data-bs-toggle="tab" role="tab" aria-controls="result1" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug1" data-bs-toggle="tab" role="tab" aria-controls="pug1" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result1" role="tabpanel">
                    <ul class="nav nav-pills">
                      <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                    </ul>
                  </div>
                  <div class="tab-pane fade" id="html1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Nav pills --&gt;
&lt;ul class=&quot;nav nav-pills&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug1" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Nav pills
ul(class=&quot;nav nav-pills&quot;)
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link active&quot;)
      | Active
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link disabled&quot;, tabindex=&quot;-1&quot;, aria-disabled=&quot;true&quot;)
      | Disabled
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Pill shaped pills-->
          <section class="pb-5 mb-md-2" id="pills-pill-shape">
            <h2 class="h5 mb-3">Pill shaped pills</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result2" data-bs-toggle="tab" role="tab" aria-controls="result2" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug2" data-bs-toggle="tab" role="tab" aria-controls="pug2" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result2" role="tabpanel">
                    <ul class="nav nav-pills">
                      <li class="nav-item"><a class="nav-link rounded-pill active" href="#">Active</a></li>
                      <li class="nav-item"><a class="nav-link rounded-pill" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link rounded-pill" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link rounded-pill disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
                    </ul>
                  </div>
                  <div class="tab-pane fade" id="html2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Rounded nav pills --&gt;
&lt;ul class=&quot;nav nav-pills&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link rounded-pill active&quot;&gt;Active&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link rounded-pill&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link rounded-pill&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link rounded-pill disabled&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug2" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Rounded nav pills
ul(class=&quot;nav nav-pills&quot;)
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link rounded-pill active&quot;)
      | Active
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link rounded-pill&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link rounded-pill&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link rounded-pill disabled&quot;, tabindex=&quot;-1&quot;, aria-disabled=&quot;true&quot;)
      | Disabled
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Fill and justify-->
          <section class="pb-5 mb-md-2" id="pills-fill">
            <h2 class="h5 mb-3">Fill and justify</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result3" data-bs-toggle="tab" role="tab" aria-controls="result3" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug3" data-bs-toggle="tab" role="tab" aria-controls="pug3" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result3" role="tabpanel">
                    <ul class="nav nav-pills nav-fill mb-4">
                      <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Much longer nav link</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
                    </ul>
                    <ul class="nav nav-pills nav-justified">
                      <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
                    </ul>
                  </div>
                  <div class="tab-pane fade" id="html3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Nav pills: Fill --&gt;
&lt;ul class=&quot;nav nav-pills nav-fill&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Much longer nav link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Nav pills: Justified --&gt;
&lt;ul class=&quot;nav nav-pills nav-justified&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug3" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Nav pills: Fill
ul(class=&quot;nav nav-pills nav-fill&quot;)
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link active&quot;)
      | Active
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Much longer nav link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link disabled&quot;,  tabindex=&quot;-1&quot;, aria-disabled=&quot;true&quot;)
      | Disabled

// Nav pills: Justified
ul(class=&quot;nav nav-pills nav-justified&quot;)
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link active&quot;)
      | Active
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link disabled&quot;,  tabindex=&quot;-1&quot;, aria-disabled=&quot;true&quot;)
      | Disabled
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Pills with dropdowns-->
          <section class="pb-5 mb-md-2" id="pills-dropdown">
            <h2 class="h5 mb-3">Pills with dropdowns</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result4" data-bs-toggle="tab" role="tab" aria-controls="result4" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug4" data-bs-toggle="tab" role="tab" aria-controls="pug4" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result4" role="tabpanel">
                    <ul class="nav nav-pills">
                      <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                      <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a>
                          <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a>
                        </div>
                      </li>
                      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                      <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
                    </ul>
                  </div>
                  <div class="tab-pane fade" id="html4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Pills with dropdowns --&gt;
&lt;ul class=&quot;nav nav-pills&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item dropdown&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; role=&quot;button&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Dropdown&lt;/a&gt;
    &lt;div class=&quot;dropdown-menu&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
      &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
      &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
      &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
      &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug4" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Pills with dropdowns
ul(class=&quot;nav nav-pills&quot;)
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link active&quot;)
      | Active
  li.nav-item.dropdown
    a(href=&quot;#&quot;, class=&quot;nav-link dropdown-toggle&quot;, data-bs-toggle=&quot;dropdown&quot;, role=&quot;button&quot;, aria-haspopup=&quot;true&quot;, aria-expanded=&quot;false&quot;)
      | Dropdown
    .dropdown-menu
      a(href='#').dropdown-item Action
      a(href='#').dropdown-item Another action
      a(href='#').dropdown-item Something else here
      .dropdown-divider
      a(href='#').dropdown-item Separated link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link disabled&quot;,  tabindex=&quot;-1&quot;, aria-disabled=&quot;true&quot;)
      | Disabled
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- Vertical pills-->
          <section class="pb-5 mb-md-2" id="pills-vertical">
            <h2 class="h5 mb-3">Vertical pills</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result5" data-bs-toggle="tab" role="tab" aria-controls="result5" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html5" data-bs-toggle="tab" role="tab" aria-controls="html5" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug5" data-bs-toggle="tab" role="tab" aria-controls="pug5" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result5" role="tabpanel">
                    <div class="row">
                      <div class="col-sm-6 col-md-4">
                        <ul class="nav nav-pills flex-column">
                          <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                          <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html5" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Vertical pills --&gt;
&lt;ul class=&quot;nav nav-pills flex-column&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug5" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Vertical pills
ul(class=&quot;nav nav-pills flex-column&quot;)
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link active&quot;)
      | Active
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link&quot;)
      | Link
  li.nav-item
    a(href=&quot;#&quot;, class=&quot;nav-link disabled&quot;, tabindex=&quot;-1&quot;, aria-disabled=&quot;true&quot;)
      | Disabled
</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- JavaScript behavior-->
          <section class="pb-5 mb-md-2" id="pills-js">
            <h2 class="h5 mb-3">JavaScript behavior</h2>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result6" data-bs-toggle="tab" role="tab" aria-controls="result6" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html6" data-bs-toggle="tab" role="tab" aria-controls="html6" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug6" data-bs-toggle="tab" role="tab" aria-controls="pug6" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result6" role="tabpanel">
                    <ul class="nav nav-pills mb-3" role="tablist">
                      <li class="nav-item"><a class="nav-link active" href="#home1" id="pills-home1" data-bs-toggle="pill" role="tab" aria-controls="home1" aria-selected="true"><i class="ci-home me-2"></i>Home</a></li>
                      <li class="nav-item"><a class="nav-link" href="#profile1" id="pills-profile1" data-bs-toggle="pill" role="tab" aria-controls="profile1" aria-selected="false"><i class="ci-user me-2"></i>Profile</a></li>
                      <li class="nav-item"><a class="nav-link" href="#messages1" id="pills-messages1" data-bs-toggle="pill" role="tab" aria-controls="messages1" aria-selected="false"><i class="ci-message me-2"></i>Messages</a></li>
                    </ul>
                    <div class="tab-content">
                      <div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="pills-home1">
                        <p class="fs-sm text-muted mb-0">Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
                      </div>
                      <div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="pills-profile1">
                        <p class="fs-sm text-muted mb-0">Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco.</p>
                      </div>
                      <div class="tab-pane fade" id="messages1" role="tabpanel" aria-labelledby="pills-messages1">
                        <p class="fs-sm text-muted mb-0">Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html6" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Nav pills --&gt;
&lt;ul class=&quot;nav nav-pills mb-3&quot; role=&quot;tablist&quot;&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot; id=&quot;pills-home1&quot; data-bs-toggle=&quot;pill&quot; role=&quot;tab&quot; aria-controls=&quot;home1&quot; aria-selected=&quot;true&quot;&gt;
      &lt;i class=&quot;ci-home me-2&quot;&gt;&lt;/i&gt;
      Home
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot; id=&quot;pills-profile1&quot; data-bs-toggle=&quot;pill&quot; role=&quot;tab&quot; aria-controls=&quot;profile1&quot; aria-selected=&quot;false&quot;&gt;
      &lt;i class=&quot;ci-user me-2&quot;&gt;&lt;/i&gt;
      Profile
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;nav-link&quot; id=&quot;pills-messages1&quot; data-bs-toggle=&quot;pill&quot; role=&quot;tab&quot; aria-controls=&quot;messages1&quot; aria-selected=&quot;false&quot;&gt;
      &lt;i class=&quot;ci-message me-2&quot;&gt;&lt;/i&gt;
      Messages
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Pills content --&gt;
&lt;div class=&quot;tab-content&quot;&gt;
  &lt;div id=&quot;home1&quot; class=&quot;tab-pane fade show active&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;pills-home1&quot;&gt;
    ...
  &lt;/div&gt;
  &lt;div id=&quot;profile1&quot; class=&quot;tab-pane fade&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;pills-profile1&quot;&gt;
    ...
  &lt;/div&gt;
  &lt;div id=&quot;messages1&quot; class=&quot;tab-pane fade&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;pills-messages1&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug6" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Nav pills
ul(class=&quot;nav nav-pills mb-3&quot;, role=&quot;tablist&quot;)
  li.nav-item
    a(href=&quot;#home1&quot;, class=&quot;nav-link active&quot;, id=&quot;pills-home1&quot;, data-bs-toggle=&quot;pill&quot;, role=&quot;tab&quot;, aria-controls=&quot;home1&quot;, aria-selected=&quot;true&quot;)
      i.ci-home.me-2
      | Home
  li.nav-item
    a(href=&quot;#profile1&quot;, class=&quot;nav-link&quot;, id=&quot;pills-profile1&quot;, data-bs-toggle=&quot;pill&quot;, role=&quot;tab&quot;, aria-controls=&quot;profile1&quot;, aria-selected=&quot;false&quot;)
      i.ci-user.me-2
      | Profile
  li.nav-item
    a(href=&quot;#messages1&quot;, class=&quot;nav-link&quot;, id=&quot;pills-messages1&quot;, data-bs-toggle=&quot;pill&quot;, role=&quot;tab&quot;, aria-controls=&quot;messages1&quot;, aria-selected=&quot;false&quot;)
      i.ci-message.me-2
      | Messages

// Pills content
.tab-content
  #home1.tab-pane.fade.show.active(role=&quot;tabpanel&quot;, aria-labelledby=&quot;pills-home1&quot;)
    | ...
  #profile1.tab-pane.fade(role=&quot;tabpanel&quot;, aria-labelledby=&quot;pills-profile1&quot;)
    | ...
  #messages1.tab-pane.fade(role=&quot;tabpanel&quot;, aria-labelledby=&quot;pills-messages1&quot;)
    | ...</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- Quick (anchor) navigation-->
        <div class="col-xxl-3 d-none d-xxl-block ps-5">
          <aside class="sticky-top pt-5">
            <div class="pt-5 mt-5">
              <div class="widget widget-links ps-4 border-start">
                <h3 class="widget-title">Jump to</h3>
                <ul class="widget-list">
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#pills-basic">Basic example</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#pills-pill-shape">Pill shaped pills</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#pills-fill">Fill and justify</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#pills-dropdown">Pills with dropdowns</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#pills-vertical">Vertical pills</a>
                  </li>
                  <li class="widget-list-item"><a class="widget-list-link" data-scroll href="#pills-js">JavaScript behavior</a>
                  </li>
                </ul>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="../vendor/prismjs/components/prism-core.min.js"></script>
    <script src="../vendor/prismjs/components/prism-markup.min.js"></script>
    <script src="../vendor/prismjs/components/prism-clike.min.js"></script>
    <script src="../vendor/prismjs/components/prism-javascript.min.js"></script>
    <script src="../vendor/prismjs/components/prism-pug.min.js"></script>
    <script src="../vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="../vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <script src="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>